<template>
  <div class="role-list">
    <header class="header">
      <div class="title-area">
        <h2 class="title">角色管理</h2>
        <span class="count-text">{{ `角色数量: ${roleList.length} 个` }}</span>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="addRole">新增角色</el-button>
    </header>
    <div class="manage-body table-container">
      <div class="table-wrapper">
        <el-table
          :data="roleList"
          stripe
          border
          :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266'}"
          class="responsive-table"
        >
          <el-table-column
            label="角色名称"
            prop="F_role_name"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="角色代码"
            prop="F_role_code"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="角色描述"
            prop="F_describe"
            align="center"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="角色类型"
            align="center"
            width="120"
          >
            <template #default="scope">
              <el-tag 
                :type="scope.row.F_role_type === 0 ? 'info' : 'success'"
                size="default"
              >
                {{ scope.row.F_role_type === 0 ? '固定角色' : '可自定义' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="学校角色"
            align="center"
            width="120"
          >
            <template #default="scope">
              <el-tag 
                :type="scope.row.F_is_school_role === 1 ? 'warning' : 'info'"
                size="default"
              >
                {{ scope.row.F_is_school_role === 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="150" align="center">
            <template #default="scope">
              <div class="status-wrapper">
                <el-tag 
                  :type="getStatusType(scope.row.F_disable)"
                  effect="plain"
                  size="default"
                  class="status-tag"
                >
                  {{ getStatusText(scope.row.F_disable) }}
                </el-tag>
                <el-switch
                  :model-value="getStatusValue(scope.row.F_disable)"
                  active-color="#67c23a"
                  inactive-color="#e7e7e7"
                  @update:model-value="(val) => toSwitch(scope.$index, scope.row, val)"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template #default="scope">
              <ButtonPermission code="role:edit" mode="disable">
                <template #default="{ disabled }">
                  <el-button 
                    type="text" 
                    size="small" 
                    icon="el-icon-edit"
                    :disabled="disabled"
                    @click="!disabled && editRole(scope.row)"
                  >
                    编辑
                  </el-button>
                </template>
              </ButtonPermission>
              <ButtonPermission code="role:setMenu" mode="disable">
                <template #default="{ disabled }">
                  <el-button 
                    type="text" 
                    size="small" 
                    icon="el-icon-menu"
                    :disabled="disabled"
                    @click="!disabled && setRoleMenu(scope.row)"
                  >
                    设置菜单
                  </el-button>
                </template>
              </ButtonPermission>
              <ButtonPermission code="role:delete" mode="disable">
                <template #default="{ disabled }">
                  <el-button 
                    type="text" 
                    size="small" 
                    icon="el-icon-delete"
                    class="delete-btn"
                    :disabled="disabled"
                    @click="!disabled && deleteRole(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </ButtonPermission>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    
    <!-- 设置角色菜单对话框 -->
    <!-- <el-dialog
      title="设置角色菜单"
      v-model="menuDialogVisible"
      width="800px"
      @close="handleMenuDialogClose"
    >
      <div v-if="currentRole" class="role-info">
        <p><strong>角色名称：</strong>{{ currentRole.F_role_name }}</p>
      </div>
      <div class="menu-tree-container">
        <el-tree
          ref="menuTree"
          :data="menuTreeData"
          :props="{ children: 'children', label: 'menu_name' }"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="checkedMenuIds"
          class="menu-tree"
        >
          <template #default="{ node, data }">
            <span class="menu-node">
              <i :class="data.menu_icon" style="margin-right: 5px;" v-if="data.menu_icon"></i>
              <span>{{ data.menu_name }}</span>
              <el-tag 
                v-if="data.menu_type === 2" 
                size="small" 
                type="success" 
                style="margin-left: 8px;"
              >
                按钮
              </el-tag>
            </span>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="menuDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRoleMenu">确定</el-button>
        </span>
      </template>
    </el-dialog> -->
    <!-- 设置角色菜单对话框 -->
    <el-dialog
      title="设置角色菜单"
      v-model="menuDialogVisible"
      width="800px"
      @close="handleMenuDialogClose"
    >
      <div v-if="currentRole" class="role-info">
        <p><strong>角色名称：</strong>{{ currentRole.F_role_name }}</p>
      </div>
      <div class="menu-tree-container">
        <el-tree
          ref="menuTree"
          :data="menuTreeData"
          :props="{ children: 'children', label: 'menu_name' }"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="checkedMenuIds"
          class="menu-tree"
        >
          <template #default="{ node, data }">
            <span class="menu-node">
              <i :class="data.menu_icon" style="margin-right: 5px;" v-if="data.menu_icon"></i>
              <span>{{ data.menu_name }}</span>
              <el-tag 
                v-if="data.menu_type === 2" 
                size="small" 
                type="success" 
                style="margin-left: 8px;"
              >
                按钮
              </el-tag>
            </span>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="menuDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRoleMenu">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 新增/编辑角色对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      @close="handleDialogClose"
    >
      <div class="dialog-content" v-loading="formLoading">
        <div class="block">
          <div class="row">
            <div class="item role-name">
              <div class="label">
                <i>*</i>
                角色名称
              </div>
              <div class="data">
                <el-input 
                  v-model="roleForm.F_role_name" 
                  maxlength="50" 
                  placeholder="请输入角色名称"
                ></el-input>
              </div>
            </div>
            <div class="item role-code">
              <div class="label">
                <i>*</i>
                角色代码
              </div>
              <div class="data">
                <el-input 
                  v-model="roleForm.F_role_code" 
                  maxlength="50" 
                  placeholder="请输入角色代码（英文）"
                  :disabled="isEditMode"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="item role-description">
              <div class="label">角色描述</div>
              <div class="data">
                <el-input 
                  v-model="roleForm.F_describe" 
                  type="textarea" 
                  :rows="3"
                  maxlength="200" 
                  placeholder="请输入角色描述"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="item role-type">
              <div class="label">
                <i>*</i>
                角色类型
              </div>
              <div class="data">
                <el-radio-group v-model="roleForm.F_is_school_role" :disabled="isEditMode">
                  <el-radio :label="0">非学校角色</el-radio>
                  <el-radio :label="1">学校角色</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="formLoading">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'roleList',
  data() {
    return {
      roleList: [],
      // 菜单相关
      menuDialogVisible: false,
      currentRole: null,
      menuTreeData: [],
      checkedMenuIds: [],
      // 新增/编辑角色对话框
      dialogVisible: false,
      dialogTitle: '新增角色',
      isEditMode: false,
      formLoading: false,
      roleForm: {
        F_role_name: '',
        F_role_code: '',
        F_describe: '',
        F_is_school_role: 0, // 0-非学校角色，1-学校角色
      },
      roleId: '',
    };
  },
  components: {},
  mounted() {
    this.getSysRoles();
  },
  computed: {},

  methods: {
    // 获取状态值（用于el-switch）
    getStatusValue(disable) {
      // 处理不同的数据结构
      const status = disable?.Int64 !== undefined ? disable.Int64 : disable;
      return status === 0;
    },
    
    // 获取状态文本
    getStatusText(disable) {
      const status = disable?.Int64 !== undefined ? disable.Int64 : disable;
      return status === 0 ? '启用' : '禁用';
    },
    
    // 获取状态标签类型
    getStatusType(disable) {
      // 处理 null、undefined 或空值的情况
      if (disable === null || disable === undefined) {
        return 'info';
      }
      const status = disable?.Int64 !== undefined ? disable.Int64 : disable;
      // 确保返回的值是有效的 ElTag type 值
      return status === 0 ? 'success' : 'info';
    },
    
    // 切换角色状态
    async toSwitch(index, row, newValue) {
      const oldStatus = row.F_disable?.Int64 !== undefined ? row.F_disable.Int64 : row.F_disable;
      const toStatus = newValue ? 0 : 1; // true表示启用(0)，false表示禁用(1)
      const F_role_id = row.F_role_id;
      
      // 先更新视图显示
      if (row.F_disable?.Int64 !== undefined) {
        row.F_disable.Int64 = toStatus;
      } else {
        row.F_disable = toStatus;
      }
      
      const formData = new FormData();
      formData.append('F_role_id', F_role_id);
      formData.append('F_status', toStatus);
      
      try {
        const { F_responseMsg, F_responseNo } = await this.$api.disableRole(formData);
        if (F_responseNo !== 10000) {
          // 恢复原状态
          if (row.F_disable?.Int64 !== undefined) {
            row.F_disable.Int64 = oldStatus;
          } else {
            row.F_disable = oldStatus;
          }
          this.$toast(
            `${toStatus === 0 ? '启用' : '禁用'}失败: ${F_responseMsg || '未知错误'}`,
            2000
          );
        } else {
          this.$toast(
            `${toStatus === 0 ? '启用' : '禁用'}成功`,
            1000
          );
        }
      } catch (err) {
        console.error('切换角色状态失败:', err);
        // 恢复原状态
        if (row.F_disable?.Int64 !== undefined) {
          row.F_disable.Int64 = oldStatus;
        } else {
          row.F_disable = oldStatus;
        }
        this.$toast(`${toStatus === 0 ? '启用' : '禁用'}失败`, 2000);
      }
    },
    toUserList() {
      this.$router.push({
        path: '/homepage/systemManage/systemUserList',
      });
    },
    async getSysRoles() {
      try {
        // 使用新接口从rb_system_role表获取系统角色列表
        const { F_role_list } = await this.$api.getSystemRoles();
        if (F_role_list && Array.isArray(F_role_list)) {
          // 数据格式转换：将后端返回的字段名转换为前端使用的字段名
          this.roleList = F_role_list
            .filter((e) => {
              // 过滤已删除的角色
              const isdel = e.isdel?.Int64 !== undefined ? e.isdel.Int64 : (e.F_isdel?.Int64 !== undefined ? e.F_isdel.Int64 : e.isdel || e.F_isdel || 0);
              return isdel === 0;
            })
            .map((role) => {
              // 统一字段名，确保兼容性
              // 注意：后端SystemRole结构体的Id字段JSON序列化为F_id
              return {
                F_role_id: role.F_id || role.id || role.F_role_id,
                F_role_name: role.F_role_name || role.role_name,
                F_role_code: role.F_role_code || role.role_code,
                F_role_type: role.F_role_type !== undefined ? role.F_role_type : (role.role_type !== undefined ? role.role_type : (role.F_role_type?.Int64 !== undefined ? role.F_role_type.Int64 : role.role_type)),
                F_disable: role.F_disable !== undefined ? role.F_disable : (role.disable !== undefined ? role.disable : role.F_disable),
                F_isdel: role.F_isdel !== undefined ? role.F_isdel : (role.isdel !== undefined ? role.isdel : role.F_isdel),
                F_describe: role.F_describe || role.describe,
                F_is_school_role: role.F_is_school_role !== undefined ? role.F_is_school_role : (role.is_school_role !== undefined ? role.is_school_role : (role.F_is_school_role?.Int64 !== undefined ? role.F_is_school_role.Int64 : role.is_school_role)),
              };
            });
        } else {
          this.roleList = [];
        }
      } catch (error) {
        console.error('获取系统角色列表失败:', error);
        this.$toast('获取角色列表失败');
        this.roleList = [];
      }
    },
    editRole(item) {
      // 兼容不同的数据格式
      const roleType = item.F_role_type?.Int64 !== undefined ? item.F_role_type.Int64 : item.F_role_type;
      if (roleType === 0) {
        // 固定角色（系统预定义，不能修改删除）
        this.$toast('该角色为预设角色，禁止编辑');
        return;
      }
      this.isEditMode = true;
      this.dialogTitle = '编辑角色';
      this.roleId = item.F_role_id;
      this.roleForm.F_role_name = item.F_role_name || '';
      this.roleForm.F_role_code = item.F_role_code || '';
      this.roleForm.F_describe = item.F_describe || '';
      this.roleForm.F_is_school_role = item.F_is_school_role !== undefined 
        ? (item.F_is_school_role?.Int64 !== undefined ? item.F_is_school_role.Int64 : item.F_is_school_role)
        : 0;
      this.dialogVisible = true;
    },
    deleteRole(item) {
      // 兼容不同的数据格式
      const roleType = item.F_role_type?.Int64 !== undefined ? item.F_role_type.Int64 : item.F_role_type;
      if (roleType === 0) {
        // 固定角色（系统预定义，不能修改删除）
        this.$toast('该角色为预设角色，禁止删除');
        return;
      }
      const { F_role_id, F_role_name } = item;
      this.$delete(F_role_name, async () => {
        try {
          // 使用新的删除系统角色接口（操作rb_system_role表）
          const { F_responseNo, F_responseMsg } = await this.$api.deleteSystemRole({
            F_role_id: F_role_id,
          });
          if (F_responseNo === 10000) {
            this.$toast('删除该角色成功');
            this.getSysRoles();
          } else {
            this.$toast(`删除该角色失败: ${F_responseMsg}`);
          }
        } catch (e) {
          console.error(e);
          this.$toast('删除该角色失败');
        }
      });
    },
    exportData() {
      console.log('export data');
      this.$toast('功能改进中，尚未开放');
    },
    addRole() {
      this.isEditMode = false;
      this.dialogTitle = '新增角色';
      this.resetFormData();
      this.dialogVisible = true;
    },
    
    // 重置表单数据
    resetFormData() {
      this.roleForm = {
        F_role_name: '',
        F_role_code: '',
        F_describe: '',
        F_is_school_role: 0,
      };
      this.roleId = '';
      this.isEditMode = false;
    },
    
    // 关闭对话框
    handleDialogClose() {
      this.dialogVisible = false;
      setTimeout(() => {
        this.resetFormData();
      }, 300);
    },
    
    // 确认提交
    async handleConfirm() {
      // 验证表单
      if (!this.roleForm.F_role_name || !this.roleForm.F_role_name.trim()) {
        this.$toast('请输入角色名称');
        return;
      }
      
      if (!this.roleForm.F_role_code || !this.roleForm.F_role_code.trim()) {
        this.$toast('请输入角色代码');
        return;
      }
      
      // 验证角色代码格式
      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(this.roleForm.F_role_code)) {
        this.$toast('角色代码只能包含字母、数字和下划线，且必须以字母或下划线开头');
        return;
      }
      
      this.formLoading = true;
      try {
        const params = {
          F_role_name: this.roleForm.F_role_name.trim(),
          F_role_code: this.roleForm.F_role_code.trim(),
          F_describe: this.roleForm.F_describe.trim(),
          F_is_school_role: this.roleForm.F_is_school_role,
        };
        
        if (this.isEditMode) {
          // 编辑角色
          params.F_role_id = this.roleId;
          const { F_responseNo, F_responseMsg } = await this.$api.updateSystemRole(params);
          if (F_responseNo === 10000) {
            this.$toast('编辑角色成功');
            this.dialogVisible = false;
            this.resetFormData();
            this.getSysRoles();
          } else {
            this.$toast(F_responseMsg || '编辑角色失败');
          }
        } else {
          // 新增角色
          const { F_responseNo, F_responseMsg } = await this.$api.createSystemRole(params);
          if (F_responseNo === 10000) {
            this.$toast('新增角色成功');
            this.dialogVisible = false;
            this.resetFormData();
            this.getSysRoles();
          } else {
            this.$toast(F_responseMsg || '新增角色失败');
          }
        }
      } catch (error) {
        console.error('保存角色失败:', error);
        this.$toast('保存角色失败');
      } finally {
        this.formLoading = false;
      }
    },
    
    // 设置角色菜单
    async setRoleMenu(row) {
      this.currentRole = row;
      this.menuDialogVisible = true;
      
      try {
        // 获取所有菜单（包括菜单项和功能按钮）
        const { F_responseNo, F_menu_list } = await this.$api.getAllMenus();
        if (F_responseNo === 10000 && F_menu_list) {
          // 确保菜单数据正确格式化
          this.menuTreeData = Array.isArray(F_menu_list) ? F_menu_list : [];
        } else {
          this.$toast('获取菜单列表失败');
          return;
        }
        
        // 获取角色已分配的菜单ID（包括功能按钮）
        // 确保 F_role_id 是正确的格式（可能是对象，需要提取实际值）
        let roleId = row.F_role_id;
        
        // 处理各种可能的角色ID格式
        if (roleId && typeof roleId === 'object') {
          if (roleId.Int64 !== undefined) {
            roleId = roleId.Int64;
          } else if (roleId.String !== undefined) {
            roleId = roleId.String;
          } else {
            // 如果是对象但没有Int64或String属性，尝试直接使用
            roleId = roleId;
          }
        }
        
        // 转换为字符串或数字（确保是有效值）
        if (roleId !== null && roleId !== undefined && roleId !== '') {
          roleId = String(roleId);
        } else {
          console.warn('角色ID无效，无法获取菜单列表', { row, F_role_id: row.F_role_id });
          this.checkedMenuIds = [];
          this.$toast('角色ID无效');
          return;
        }
        
        console.log('获取角色菜单ID，参数:', { F_role_id: roleId });
        
        try {
          // 使用新接口获取系统角色（rb_system_role）已分配的菜单ID
          const response = await this.$api.getSystemRoleMenuIds({
            F_role_id: roleId
          });
          
          const { F_responseNo: resNo, F_menu_ids, F_responseMsg } = response || {};
          
          if (resNo === 10000 && F_menu_ids) {
            // 确保是数组格式，并转换为数字类型（el-tree需要）
            let menuIds = Array.isArray(F_menu_ids) ? F_menu_ids : [];
            // 转换为数字类型，确保ID匹配
            this.checkedMenuIds = menuIds.map(id => typeof id === 'string' ? parseInt(id) : id);
            console.log('获取角色菜单ID成功:', this.checkedMenuIds.length, '个菜单');
          } else {
            console.warn('获取角色菜单ID失败或为空:', { resNo, F_responseMsg, F_menu_ids });
            this.checkedMenuIds = [];
          }
        } catch (apiError) {
          // 如果 API 调用失败（如 400 错误），可能是接口不存在或参数格式不对
          console.warn('获取角色菜单ID接口调用失败，可能是接口不存在:', apiError);
          // 如果接口不存在，初始化空数组，允许用户重新选择菜单
          this.checkedMenuIds = [];
          // 不显示错误提示，因为可能是新角色还没有分配菜单
          console.log('角色菜单ID获取失败，将使用空数组，允许用户重新选择');
        }
        
        // 等待树组件渲染完成后再设置选中状态
        this.$nextTick(() => {
          if (this.$refs.menuTree && this.checkedMenuIds.length > 0) {
            this.$refs.menuTree.setCheckedKeys(this.checkedMenuIds);
          }
        });
      } catch (error) {
        console.error('获取菜单信息失败:', error);
        this.$toast('获取菜单信息失败');
      }
    },
    
    // 保存角色菜单关联
    async saveRoleMenu() {
      if (!this.currentRole) return;
      
      try {
        if (!this.$refs.menuTree) {
          this.$toast('菜单树未初始化');
          return;
        }
        
        // 获取所有选中的节点（包括菜单项和功能按钮）
        const checkedKeys = this.$refs.menuTree.getCheckedKeys();
        // 获取半选中的父节点（当子节点部分选中时）
        const halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();
        
        // 合并完全选中和半选中的节点
        // 注意：如果父菜单被选中，其下的功能按钮也应该被包含
        const allCheckedKeys = [...new Set([...checkedKeys, ...halfCheckedKeys])];
        
        // 确保 F_role_id 是正确的格式
        let roleId = this.currentRole.F_role_id;
        
        // 处理各种可能的角色ID格式
        if (roleId && typeof roleId === 'object') {
          if (roleId.Int64 !== undefined) {
            roleId = roleId.Int64;
          } else if (roleId.String !== undefined) {
            roleId = roleId.String;
          } else {
            roleId = roleId;
          }
        }
        
        // 转换为字符串（确保是有效值）
        if (roleId !== null && roleId !== undefined && roleId !== '') {
          roleId = String(roleId);
        } else {
          console.error('保存菜单设置失败：角色ID无效', { currentRole: this.currentRole });
          this.$toast('角色ID无效，无法保存菜单设置');
          return;
        }
        
        console.log('保存菜单设置:', {
          roleId: roleId,
          checkedKeys: checkedKeys.length,
          halfCheckedKeys: halfCheckedKeys.length,
          allCheckedKeys: allCheckedKeys.length
        });
        
        const params = {
          F_role_id: roleId,
          F_menu_ids: JSON.stringify(allCheckedKeys)
        };
        
        // 使用新接口设置系统角色（rb_system_role）菜单权限
        const { F_responseNo, F_responseMsg } = await this.$api.setSystemRoleMenu(params);
        
        if (F_responseNo === 10000) {
          this.$toast('设置菜单成功');
          this.menuDialogVisible = false;
          // 角色菜单权限设置后，刷新当前用户的按钮权限（如果当前用户使用了该角色）
          try {
            await this.$store.dispatch('user/fetchAllButtonPermissions');
            console.log('角色菜单权限设置后，按钮权限已刷新');
          } catch (error) {
            console.error('刷新按钮权限失败:', error);
          }
        } else {
          this.$toast(`设置菜单失败: ${F_responseMsg || '未知错误'}`);
        }
      } catch (error) {
        console.error('保存角色菜单失败:', error);
        this.$toast('保存角色菜单失败');
      }
    },
    
    // 关闭菜单对话框
    handleMenuDialogClose() {
      this.currentRole = null;
      this.menuTreeData = [];
      this.checkedMenuIds = [];
    },
  },
};
</script>

<style lang="less" scoped>
.role-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .title-area {
      display: flex;
      align-items: center;
      
      .title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
      
      .count-text {
        margin-left: 15px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
  }
  
  .manage-body {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    padding: 0 20px;
    
    .status-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    
    .status-tag {
      margin: 0;
    }
    
    :deep(.el-table) {
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      
      .el-button {
        padding: 4px 8px;
        transition: all 0.3s;
        
        &.delete-btn {
          color: #f56c6c;
          
          &:hover {
            background-color: rgba(245, 108, 108, 0.1);
          }
        }
        
        &:hover {
          background-color: rgba(0, 156, 255, 0.1);
          border-radius: 4px;
        }
      }
    }
  }
  
  // 菜单对话框样式
  .role-info {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    
    p {
      margin: 0;
      font-size: 14px;
      color: #606266;
    }
  }
  
  .menu-tree-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
    
    .menu-tree {
      .menu-node {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

// 对话框样式
.dialog-content {
  padding: 20px 0;
  
  .block {
    margin-bottom: 24px;
    
    .title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #303133;
      padding-left: 4px;
      border-left: 3px solid #409eff;
    }
    
    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .item {
        flex: 0 0 calc(50% - 10px);
        min-width: 200px;
        
        &.role-name {
          flex: 0 0 calc(50% - 10px);
        }
        
        &.role-code {
          flex: 0 0 calc(50% - 10px);
        }
        
        &.role-description {
          flex: 0 0 100%;
        }
        
        &.role-type {
          flex: 0 0 100%;
        }
        
        .label {
          margin-bottom: 8px;
          color: #606266;
          font-size: 14px;
          font-weight: 500;
          display: flex;
          align-items: center;
          
          i {
            color: #f56c6c;
            margin-right: 4px;
            font-style: normal;
            font-weight: 600;
          }
        }
        
        .data {
          :deep(.el-input),
          :deep(.el-textarea) {
            width: 100%;
            
            .el-input__inner {
              border-radius: 4px;
              transition: all 0.3s;
              
              &:focus {
                border-color: #409eff;
                box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
              }
            }
          }
          
          :deep(.el-textarea__inner) {
            border-radius: 4px;
            transition: all 0.3s;
            resize: vertical;
            
            &:focus {
              border-color: #409eff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
          }
          
          :deep(.el-radio-group) {
            width: 100%;
            display: flex;
            gap: 24px;
            
            .el-radio {
              margin-right: 0;
              
              .el-radio__label {
                padding-left: 8px;
                font-size: 14px;
                color: #606266;
              }
              
              .el-radio__input.is-checked .el-radio__inner {
                border-color: #409eff;
                background-color: #409eff;
              }
              
              .el-radio__input.is-checked + .el-radio__label {
                color: #409eff;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  
  .el-dialog__header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e4e7ed;
    background-color: #fafafa;
    border-radius: 8px 8px 0 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      line-height: 1.5;
    }
    
    .el-dialog__headerbtn {
      top: 20px;
      right: 24px;
      
      .el-dialog__close {
        font-size: 18px;
        color: #909399;
        transition: color 0.3s;
        
        &:hover {
          color: #303133;
        }
      }
    }
  }
  
  .el-dialog__body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: #c0c4cc;
      border-radius: 3px;
      
      &:hover {
        background-color: #a0a4ac;
      }
    }
    
    &::-webkit-scrollbar-track {
      background-color: #f5f7fa;
      border-radius: 3px;
    }
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #e4e7ed;
    background-color: #fafafa;
    border-radius: 0 0 8px 8px;
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      
      .el-button {
        min-width: 80px;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;
        
        &.el-button--default {
          border-color: #dcdfe6;
          color: #606266;
          
          &:hover {
            border-color: #c0c4cc;
            color: #606266;
            background-color: #ecf5ff;
          }
        }
        
        &.el-button--primary {
          background-color: #409eff;
          border-color: #409eff;
          
          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
          
          &:active {
            background-color: #3a8ee6;
            border-color: #3a8ee6;
          }
          
          &.is-loading {
            background-color: #409eff;
            border-color: #409eff;
          }
        }
      }
    }
  }
}
</style>
